import React, { useState, useEffect, createContext, useContext } from 'react';

const ToastContext = createContext();

export const useToast = () => {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error('useToast must be used within a ToastProvider');
  }
  return context;
};

export const ToastProvider = ({ children }) => {
  const [toasts, setToasts] = useState([]);

  const addToast = (message, type = 'info', duration = 3000) => {
    const id = Date.now() + Math.random();
    const toast = { id, message, type, duration };
    
    setToasts(prev => [...prev, toast]);
    
    if (duration > 0) {
      setTimeout(() => {
        removeToast(id);
      }, duration);
    }
  };

  const removeToast = (id) => {
    setToasts(prev => prev.filter(toast => toast.id !== id));
  };

  const contextValue = {
    addToast,
    removeToast,
    success: (message, duration) => addToast(message, 'success', duration),
    error: (message, duration) => addToast(message, 'error', duration),
    warning: (message, duration) => addToast(message, 'warning', duration),
    info: (message, duration) => addToast(message, 'info', duration),
  };

  return (
    <ToastContext.Provider value={contextValue}>
      {children}
      <ToastContainer toasts={toasts} removeToast={removeToast} />
    </ToastContext.Provider>
  );
};

const ToastContainer = ({ toasts, removeToast }) => {
  if (toasts.length === 0) return null;

  return (
    <div className="fixed top-4 right-4 z-50 space-y-2 max-w-sm">
      {toasts.map(toast => (
        <Toast key={toast.id} toast={toast} onRemove={removeToast} />
      ))}
    </div>
  );
};

const Toast = ({ toast, onRemove }) => {
  const { id, message, type } = toast;
  
  const getToastStyles = () => {
    const baseStyles = "p-4 rounded-xl shadow-lg backdrop-blur-md border transform transition-all duration-500 ease-in-out";
    
    switch (type) {
      case 'success':
        return `${baseStyles} bg-green-500/90 border-green-400 text-white`;
      case 'error':
        return `${baseStyles} bg-red-500/90 border-red-400 text-white`;
      case 'warning':
        return `${baseStyles} bg-yellow-500/90 border-yellow-400 text-white`;
      default:
        return `${baseStyles} bg-blue-500/90 border-blue-400 text-white`;
    }
  };

  const getIcon = () => {
    switch (type) {
      case 'success': return '✅';
      case 'error': return '❌';
      case 'warning': return '⚠️';
      default: return 'ℹ️';
    }
  };

  return (
    <div 
      className={`${getToastStyles()} animate-slide-in-right cursor-pointer hover:scale-105`}
      onClick={() => onRemove(id)}
    >
      <div className="flex items-center space-x-2">
        <span className="text-lg">{getIcon()}</span>
        <span className="font-medium">{message}</span>
        <button 
          onClick={(e) => {
            e.stopPropagation();
            onRemove(id);
          }}
          className="ml-auto text-white/70 hover:text-white transition-colors"
        >
          ×
        </button>
      </div>
    </div>
  );
};